<template>
  <div class="line" id="line"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'LineCharts',
  props: {
    data: {
      type: Array,
      default: () => {
        return [];
      }
    },
    xAxis: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      const chartDom = document.getElementById('line');
      const myChart = echarts.init(chartDom);

      const option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['文章数量', '阅读量', '点赞量', '评论数', '转发量'],
          bottom: '5%',
          icon: 'roundRect',
          itemGap: 40
        },
        grid: {
          top: '3%',
          left: '3%',
          right: '4%',
          bottom: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.xAxis
        },
        yAxis: {
          type: 'value'
        },
        series: this.data || [
          {
            name: '文章数量',
            type: 'line',
            data: [120, 200, 180, 100, 300, 180, 200]
          },
          {
            name: '阅读量',
            type: 'line',
            data: [220, 1000, 191, 234, 290, 330, 310]
          },
          {
            name: '点赞量',
            type: 'line',
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: '评论数',
            type: 'line',
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: '转发量',
            type: 'line',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      };

      option && myChart.setOption(option);
    });
  }
};
</script>

<style scoped>
  .line {
    height: inherit;
  }
</style>
